import React from 'react';
import {Button,Form,Input,message} from 'antd';
import qs from 'qs';
import * as Constant from '../../../common/const';

const FormItem = Form.Item;
const { TextArea } = Input;
let last = undefined;

class LimitMACModal extends React.Component{
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if(!err){
                const submit = values.id ? this.props.update : this.props.save;
                submit(qs.stringify(values)).then(res => {
                    if(res && Constant.REQUEST_SUCCESS == res.code){
                        message.success(Constant.OPERATION_SUCCESS_TIP,Constant.AUTO_DISAPPEAR_TIME);
                        this.props.cancel(true);
                    }else if(res && '400' == res.code){
                        res && res.code !== Constant.REQUEST_UNAUTHORIZED && message.error(res.msg,5);
                        this.props.cancel(true);
                    }
                });
            }
        });
    }

    validator = (rule,value,callback) =>{
        let id = this.props.form.getFieldValue('id');
        if(id){
            this.validatorSingel({id:id,mac:value},callback);
        }else{
            callback();
        }
    }
    validatorSingel = (params,callback) => {
        this.props.validator(qs.stringify(params)).then(res => {
            if(res && Constant.REQUEST_SUCCESS == res.code){
                if(!res.data){
                    callback('验证不通过');
                }else{
                    callback();
                }
            }else{
                callback(res.msg);
            }
        });
    }
    render(){
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 14},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('id', {
                            initialValue:this.props.mac && this.props.mac.id,
                        })(
                            <Input type={'hidden'}/>
                        )}
                    </FormItem>
                    <FormItem label={'Mac地址:'} {...formItemLayout}>
                        {getFieldDecorator('mac', {
                            rules: [{
                                required: true, message: '请输入MAC地址!',
                            },{
                                validator: this.validator,
                            }],
                            initialValue:this.props.mac && this.props.mac.mac,
                        })(
                            <TextArea  rows={4} cols={30}
                                placeholder={'Mac地址格式:0A-00-00-00-00-00或OA:00:00:00:00:00,Mac地址不区分大小写,多个地址之前以英文逗号(,)分号(;)或者点号(.)分隔.'}
                                       maxLength={255}
                            />
                        )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="primary" onClick={this.props.cancel}>返回</Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

const LimitMACModalForm = Form.create()(LimitMACModal);
export default LimitMACModalForm;